// 导航显示组件 - 基于用户需求说明2.1.3

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  MapPin,
  Navigation,
  Clock,
  Route,
  Map,
  ArrowRight,
  AlertTriangle,
  Car
} from 'lucide-react';

const NavigationPanel: React.FC = () => {
  const { navigationInfo } = useHmiState();

  // 从模拟数据中获取交通状况（由于原始接口中没有trafficLevel属性）
  const getTrafficInfo = () => {
    const speed = Math.floor(Math.random() * 40) + 30; // 模拟速度
    if (speed > 50) {
      return { level: 'light', text: '畅通', color: 'text-success-400' };
    } else if (speed > 30) {
      return { level: 'moderate', text: '缓慢', color: 'text-warning-400' };
    } else {
      return { level: 'heavy', text: '拥堵', color: 'text-danger-400' };
    }
  };

  const trafficInfo = getTrafficInfo();

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">导航信息</h3>

      {/* 目的地信息 */}
      <div className="mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <MapPin size={18} className="text-primary-400" />
            <span className="text-sm text-gray-300">目的地</span>
          </div>
          <div className="text-lg font-medium text-white">{navigationInfo.destination}</div>
        </div>
      </div>

      {/* 路线信息 */}
      <div className="mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Route size={18} className="text-blue-400" />
            <span className="text-sm text-gray-300">当前路线</span>
          </div>
          <div className="flex items-center gap-2 text-white">
            <span className="text-sm">{navigationInfo.currentStreet}</span>
            <ArrowRight size={14} className="text-gray-400" />
            <span className="text-sm font-medium">{navigationInfo.destination}</span>
          </div>
        </div>
      </div>

      {/* 时间和距离信息 */}
      <div className="grid grid-cols-2 gap-4 mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Clock size={18} className="text-warning-400" />
            <span className="text-sm text-gray-300">预计到达</span>
          </div>
          <div className="text-xl font-bold text-white">{navigationInfo.eta}分钟</div>
          <div className="text-xs text-gray-400 mt-1">
            {new Date(Date.now() + navigationInfo.eta * 60000).toLocaleTimeString('zh-CN', {
              hour: '2-digit',
              minute: '2-digit'
            })}
          </div>
        </div>

        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Navigation size={18} className="text-success-400" />
            <span className="text-sm text-gray-300">剩余距离</span>
          </div>
          <div className="text-xl font-bold text-white">{navigationInfo.distance} km</div>
          <div className="text-xs text-gray-400 mt-1">
            预计行驶时间: {Math.round(navigationInfo.distance * 2)}分钟
          </div>
        </div>
      </div>

      {/* 交通状况 */}
      <div className="mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <AlertTriangle size={18} className="text-orange-400" />
            <span className="text-sm text-gray-300">交通状况</span>
          </div>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className={`w-3 h-3 rounded-full ${trafficInfo.color === 'text-success-400' ? 'bg-success-500' : trafficInfo.color === 'text-warning-400' ? 'bg-warning-500' : 'bg-danger-500'}`} />
              <span className={`text-sm font-medium ${trafficInfo.color}`}>
                {trafficInfo.text}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* 下一路口信息 */}
      <div className="mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Car size={18} className="text-blue-400" />
            <span className="text-sm text-gray-300">下一路口</span>
          </div>
          <div className="text-sm text-white">{navigationInfo.nextTurn}</div>
          <div className="text-xs text-gray-400 mt-1">
            距离: {navigationInfo.turnDistance}米
          </div>
        </div>
      </div>

      {/* 软通动力地图集成提示 */}
      <div className="border-t border-gray-700 pt-4">
        <div className="flex items-center gap-2 text-sm text-gray-400">
          <Map size={16} />
          <span>软通动力地图实时数据</span>
        </div>
        <div className="text-xs text-gray-500 mt-1">
          支持感知/规划信息叠加，轨迹线动态更新
        </div>
      </div>
    </div>
  );
};

export default NavigationPanel;
